<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<link rel="stylesheet" type="text/css" href="yangshi.css" />
	<script type="text/javascript">
		var sum1 = 0;
		var sum2 = 0;
		var shijian = 0;
		window.onkeydown = function() {
			var key = event.keyCode;
			var center = document.getElementById("center");
			for(var i = 0; i < center.children.length; i++) {
				var keydom = center.children[i].getAttribute("keydom")
				if(key == keydom) {
					center.removeChild(center.children[i]);
					sum1++;
					var ing1 = document.getElementById("ing1");
					var ing2 = document.getElementById("ing2");
					var ing3 = document.getElementById("ing3");
					var ing4 = document.getElementById("ing4");
					var ing5 = document.getElementById("ing5");
					var ing6 = document.getElementById("ing6");
					var ing7 = document.getElementById("ing7");
					var ing8 = document.getElementById("ing8");
					var ing9 = document.getElementById("ing9");
					if(sum1 == 10) {
						ing1.style.display = "block";
					}
					if(sum1 == 20) {
						ing2.style.display = "block";
					}
					if(sum1 == 30) {
						ing3.style.display = "block";
					}
					if(sum1 == 40) {
						ing4.style.display = "block";
					}
					if(sum1 == 50) {
						ing5.style.display = "block";
					}
					if(sum1 == 60) {
						ing6.style.display = "block";
					}
					if(sum1 == 70) {
						ing7.style.display = "block";
					}
					if(sum1 == 80) {
						ing8.style.display = "block";
					}
					if(sum1 == 90) {
						ing9.style.display = "block";
					}
					break;
				}
			}
		}

		function kaishi() {
			select1 = document.getElementById("select1");
			var sel1 = select1.children[select1.selectedIndex].innerHTML.substr(48);
			if(sel1 == 0) {
				ic = setInterval('setPG()', 2000);
			};
			if(sel1 == 1) {
				ic = setInterval('setPG()', 1800);
			};
			if(sel1 == 2) {
				ic = setInterval('setPG()', 1600);
			};
			if(sel1 == 3) {
				ic = setInterval('setPG()', 1400);
			};
			if(sel1 == 4) {
				ic = setInterval('setPG()', 1200);
			};
			if(sel1 == 5) {
				ic = setInterval('setPG()', 1000);
			};
			if(sel1 == 6) {
				ic = setInterval('setPG()', 800);
			};
			if(sel1 == 7) {
				ic = setInterval('setPG()', 600);
			};
			if(sel1 == 8) {
				ic = setInterval('setPG()', 400);
			};
			if(sel1 == 9) {
				ic = setInterval('setPG()', 200);
			};
			id = setInterval('yidong()', 100);
			ie = setInterval('zhengquelu()', 1000);

		}

		function setPG() {
			var center = document.getElementById("center");
			var div = document.createElement("div");
			var num = parseInt(Math.random() * 26) + 65;
			div.innerHTML = "&#" + num + ";";
			div.setAttribute("keydom", num);
			div.style.top = "0px";
			div.style.left = parseInt(Math.random() * 700) + 10 + "px";
			center.appendChild(div);
			//			console.log(sum1)
			document.getElementById("inp1").style.display = "none"
		}

		function yidong() {
			var center = document.getElementById("center");
			center.children.className = "pg";
			for(var i = 0; i < center.children.length; i++) {
				t = parseInt(center.children[i].style.top)
				t += 10;
				center.children[i].style.top = t + "px";
				if(t > 380) {
					center.children[i].className = "posui";
					center.children[i].innerHTML = '';
				}
				if(t > 400) {
					center.removeChild(center.children[i]);
					sum2++;
				}
			}
			select2 = document.getElementById("select2");
			se2 = select2.children[select2.selectedIndex].innerHTML.substr(48);
			//			console.log(se2);
			//			console.log(sum1)
			if(sum1 == se2) {
				alert("恭喜过关");
				jieshu();
			}
			select3 = document.getElementById("select3");
			se3 = select3.children[select3.selectedIndex].innerHTML.substr(48);
			if(sum2 == se3) {
				alert("游戏失败");
				jieshu();
			}
		}

		function zhanting() {
			clearInterval(id);
			clearInterval(ic);
			clearInterval(ie);
			document.getElementById("inp1").style.display = "block"
		}

		function jieshu() {
			sum1=0;
			sum2=0;
			zhanting();
			var span1 = document.getElementById('span1');
			var span2 = document.getElementById('span2');
			var span3 = document.getElementById('span3');
			ing1.style.display = "none"
			ing2.style.display = "none"
			ing3.style.display = "none"
			ing4.style.display = "none"
			ing5.style.display = "none"
			ing6.style.display = "none"
			ing7.style.display = "none"
			ing8.style.display = "none"
			ing9.style.display = "none"
			span1.innerHTML = "100%"
			span2.innerHTML = "0秒"
			span3.innerHTML = "0字/分钟"
			var center = document.getElementById("center");
			var m = center.children.length
			for(var i = 0; i < m; i++) {
				center.removeChild(center.children[0]);
			}
		}

		function zhengquelu() {
			shijian++
			var span1 = document.getElementById('span1');
			var span2 = document.getElementById('span2');
			var span3 = document.getElementById('span3');

			if(sum1 + sum2 > 0) {
				span1.innerHTML = parseInt((sum1 / (sum1 + sum2)) * 100) + "%"
			}
			span2.innerHTML = shijian + "秒"
			span3.innerHTML = parseInt(sum1 / shijian * 60) + "字/分钟"
		}

		function shezhi() {
			xuangaun = document.getElementById("xuangaun");
			xuangaun.style.display = "block"
		}

		function queren() {
			xuangaun.style.display = "none"
		}

		function quxiao() {
			xuangaun.style.display = "none"
		}

		function moren() {
			select1.children[select1.selectedIndex].innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3";
			select2 = document.getElementById("select2");
			select3 = document.getElementById("select3");
			select2.children[select2.selectedIndex].innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;300";
			select3.children[select3.selectedIndex].innerHTML = "&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;20";
		}
	</script>
		

	<body>
		<div id="top">
			<div id="center">

			</div>
			<div id="foot">
				<input type="button" name="" id="inp1" value="开始" onclick="kaishi(1)" />
				<input type="button" name="" id="inp2" value="暂停" onclick="zhanting()" />
				<input type="button" name="" id="inp3" value="结束" onclick="jieshu()" />
				<input type="button" name="" id="inp4" value="设置" onclick="shezhi()" />
				<div id="foot-center">
					<p>正确率：<span id="span1">100%</span></p>
					<p>时间：<span id="span2">0秒</span></p>
					<p>速度：<span id="span3">0字/分钟</span></p>
				</div>
				<div id="img">
					<img src="image/苹果2.png" id="ing1" style="position: absolute;left: 40px;top: 55px;z-index: 15;display: none;" />
					<img src="image/苹果2.png" id="ing2" style="position: absolute;left: 60px;top: 55px;z-index: 15;display: none;" />
					<img src="image/苹果2.png" id="ing3" style="position: absolute;left: 80px;top: 55px;z-index: 15;display: none;" />
					<img src="image/苹果2.png" id="ing4" style="position: absolute;left: 100px;top: 55px;z-index: 15;display: none;" />
					<img src="image/苹果2.png" id="ing5" style="position: absolute;left: 50px;top: 40px;z-index: 10; display: none;" />
					<img src="image/苹果2.png" id="ing6" style="position: absolute;left: 70px;top: 40px;z-index: 10;display: none;" />
					<img src="image/苹果2.png" id="ing7" style="position: absolute;left: 90px;top: 40px;z-index: 10;display: none;" />
					<img src="image/苹果2.png" id="ing8" style="position: absolute;left: 80px;top: 25px;display: none;" />
					<img src="image/苹果2.png" id="ing9" style="position: absolute;left: 60px;top: 25px;display: none;" />
					<img src="image/篮子.png" style="position: relative;z-index: 100;" />
				</div>
			</div>
			<div id="xuangaun">
				<select class="select" id="select1" name="">
					<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0</option>
					<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;1</option>
					<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2</option>
					<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3</option>
					<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;4</option>
					<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;5</option>
					<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;6</option>
					<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;7</option>
					<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;8</option>
					<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;9</option>
				</select>
				<select class="select" id="select2" name="">
					<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;100</option>
					<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;200</option>
					<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;300</option>
					<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;400</option>
					<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;500</option>
					<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;600</option>
					<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;700</option>
					<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;800</option>
					<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;900</option>
				</select>
				<select class="select" id="select3" name="">
					<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;10</option>
					<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;20</option>
					<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;30</option>
					<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;40</option>
					<option value="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;50</option>
				</select>
				<input id="imp1" class="imp" type="button" name="" id="" value="确定" onclick="queren()" />
				<input id="imp2" class="imp" type="button" name="" id="" value="取消" onclick="quxiao()" />
				<input id="imp3" class="imp" type="button" name="" id="" value="默认" onclick="moren()" />
			</div>

		</div>

	</body>

</html>